<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="first">123</div>
  <div id="box" style="color: red;">456</div>
  <button>btn</button>

  <script>
    // dom: document object model

    // querySelector获取的是满足条件的第一个
    // querySelector虽然可以通过标签名/id名/class类名或者获取元素，但都是一个
    console.log(document.querySelector("div"));
    console.log(document.querySelector("#box"));
    console.log(document.querySelector(".first"));

    // getElementsByTagName获取的是所有符合条件的元素，组成的类数组
    console.log(document.getElementsByTagName("div"));
    
    console.log(document.getElementById("box"));
    
    // getElementsByClassName取出来的也是集合
    console.log(document.getElementsByClassName("first"));





    document.querySelector("button").onclick = () => {
      // 操作css样式
      // console.log(document.getElementById("box").style)
      // document.getElementById("box").style.color = "green";
      // document.getElementById("box").style.display = "none";

      // console.log(document.getElementById("box").innerHTML)
      document.getElementById("box").innerHTML = "99999"
    }
    
  </script>
</body>
</html>